@import '../variables/default.scss';
@import '../mixins/index.scss';

$at-modal-duration: 200ms;

.at-modal {
  /*postcss-pxtransform rn eject enable*/
  position: fixed;
  /*postcss-pxtransform rn eject disable*/
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  visibility: hidden;
  transition: visibility $at-modal-duration ease-in;
  z-index: $zindex-modal;

  /* elements */
  &__overlay,
  &__container {
    opacity: 0;
    transition: opacity $at-modal-duration ease-in;
  }

  &__overlay {
    @include overlay;
  }

  &__container {
    @include absolute-center();
    width: $at-modal-width;
    border-radius: $border-radius-lg;
    background-color: $at-modal-bg-color;
    overflow: hidden;
    &--RN {
      flex: 1;
      opacity: 1;
      top: 35%;
      left: (750px - $at-modal-width) / 2;
    }
  }

  &__header {
    @include hairline-bottom-relative($color: $color-grey-4);
    @include line(1);

    padding: $spacing-v-md $spacing-h-lg;
    color: $at-modal-header-text-color;
    font-size: $font-size-lg;
    text-align: center;
  }

  &__content {
    padding: $spacing-h-xl $spacing-h-lg;
    min-height: 180px;
    max-height: 840px;
    color: $at-modal-content-text-color;
    font-size: $font-size-base;
    box-sizing: content-box;
    width: auto;
  }

  &__footer {
    @include hairline-top-relative($color: $color-grey-4);
    display: flex;
    flex-direction: row;

    &--simple .at-modal__action > button:last-child:nth-child(2) {
      color: $at-modal-btn-confirm-color;
    }
  }

  &__action {
    flex: 1;
    display: flex;
    flex-direction: row;
    & > button {
      @include flex(auto);
      @include line(1);
      @include active;

      margin-top: 0;
      min-width: 160px;
      height: 88px;
      color: $at-modal-btn-default-color;
      font-size: $font-size-base;
      line-height: 86px;
      outline: 0;
      border: 0;
      border-radius: 0;
      background-color: transparent;

      &::after {
        border: 0;
        border-radius: 0;
        width: initial;
        height: initial;
      }

      &:not(:first-child) {
        @include hairline-left-relative($color: $color-grey-4);
      }

      &:last-child {
        color: $at-modal-btn-confirm-color;
      }
    }
  }

  /* modifiers */
  &--active {
    visibility: visible;

    .at-modal__overlay,
    .at-modal__container {
      opacity: 1;
    }
  }

  &__button {
    background-color: transparent;
    flex: 1;
    border-left-width: 1px;
    border-left-style: solid;
    border-left-color: $color-grey-4;
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: $color-grey-4;
    border-radius: 0;
    &-0 {
      border-left-width: 0;
    }
  }
}
